<template>
	<view class="container padding-top-sm">
		<view
			class="margin-left-sm radius5 bg-white margin-right-sm padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				服务信息
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 66rpx;">
				<view class="text-999">
					客户姓名
				</view>
				<view class="text-333">
					{{info.userName}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					联系电话
				</view>
				<view class="text-333">
					{{info.userMobile}}
				</view>
			</view>
			<view v-if="info.serviceType!=2" class="flex justify-between align-center text-df"
				style="margin-top: 40rpx;">
				<view class="text-999">
					工作地址
				</view>
				<view class="text-333 text-cut-2" style="width: 270rpx;">
					{{info.addressFormatted}}
				</view>
			</view>
			<view class="" v-else>
				<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
					<view class="text-999">
						取货地址
					</view>
					<view class="text-333 text-cut-2" style="width: 270rpx;">
						{{info.addressFormatted}}
					</view>
				</view>
				<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
					<view class="text-999">
						配送地址
					</view>
					<view class="text-333 text-cut-2" style="width: 270rpx;">
						{{info.deliverFormatted}}
					</view>
				</view>
			</view>

			<view v-if="info.serviceType!=4" class="flex justify-between align-center text-df"
				style="margin-top: 40rpx;">
				<view class="text-999">
					预付金额
				</view>
				<view class="color">
					<text class="text-sm">¥</text>
					<text class="text-17">{{info.price/100}}</text>
				</view>
			</view>
		</view>
		<view class="margin-sm radius5 bg-white padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				客户描述
			</view>
			<view class="text-13 text-666" style="margin-top: 66rpx;">
				{{info.description}}
			</view>
			<view class="flex justify-start flex-wrap">
				<image :src="item" mode="" class="i-img margin-top" v-for="(item,index) in descriptionPic"
					:class="{'margin-left-sm':(index+3)%3!=0}"></image>
			</view>
		</view>
		
		<view class="margin-sm radius5 bg-white padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				订单信息
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 66rpx;">
				<view class="text-999">
					订单编号
				</view>
				<view class="text-333">
					{{info.serviceNo}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					下单时间
				</view>
				<view class="text-333">
					{{info.createTime}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					支付方式
				</view>
				<view class="text-333">
					微信支付
				</view>
			</view>
		</view>
		<view v-if='info.serviceType==2'
			class="margin-sm radius5 bg-white padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				附加信息
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 66rpx;">
				<view class="text-999">
					配送详细地址
				</view>
				<view class="text-333">
					{{info.deliveryDetailedAddress}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					货物高度
				</view>
				<view class="text-333">
					{{info.goodsHeight}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					货物重量
				</view>
				<view class="text-333">
					{{info.goodsWeight}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					货物宽度
				</view>
				<view class="text-333">
					{{info.goodsWidth}}
				</view>
			</view>
		</view>
		<view v-if='info.serviceStatus==7'
			class="margin-sm radius5 bg-white padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				勘察信息
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 66rpx;">
				<view class="text-999">
					屏幕品牌
				</view>
				<view class="text-333">
					{{info.brandName}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					货物高度
				</view>
				<view class="text-333">
					{{info.height}}cm
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					货物数量
				</view>
				<view class="text-333">
					{{info.count}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					货物宽度
				</view>
				<view class="text-333">
					{{info.width}}cm
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					有无静电地板
				</view>
				<view class="text-333">
					{{info.floorType?'有':'无'}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					墙壁是否承重
				</view>
				<view class="text-333">
					{{info.wallType?'是':'否'}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					安装时间
				</view>
				<view class="text-333">
					{{info.installTime}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					勘察图片
				</view>
				<view class="flex justify-start flex-wrap">
					<image :src="item" mode="" class="i-img margin-top" v-for="(item,index) in info.descriptionReplyPic.split(',')"
						:class="{'margin-left-sm':(index+3)%3!=0}"></image>
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					勘察备注
				</view>
				<view class="text-333">
					{{info.descriptionReply}}
				</view>
			</view>
		</view>
		<!-- <view class="flex padding-left-sm padding-right-sm margin-top padding-bottom justify-center">
			<button v-if="info.serviceStatus==5 && info.userId==userId" class="btn round text-13 text-white bg-color"
				@click="toPage('/filePage/pages/orderRecommend/orderRecommend?id='+info.id)">评论列表</button>
			<button v-if='info.serviceStatus==2 && info.receiverId==userId '
				class="btn round text-13 text-white bg-color" @click="submit()">提交</button>
			<button v-if='info.serviceStatus==3 && info.userId==userId' class="btn round text-13 text-white bg-color"
				@click="checkOutState">验收</button>
			<button v-if='info.serviceStatus==1 && info.userId==userId' class="btn round text-13 text-white bg-color"
				@click="toPage('/filePage/pages/programme/programme?id='+info.id)">竞标方案</button>
			<button v-if='info.serviceStatus==4 && info.userId==userId' class="btn round text-13 text-white bg-color"
				@click="toPage('/filePage/pages/addComment/addComment?item='+JSON.stringify(info)+'&type=2')">评价</button>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				info: {},
				id: '',
				descriptionPic: [],
				userId: uni.getStorageSync('userId'),
			};
		},
		onLoad(options) {
			// console.log(options)
			if (options.id) {
				this.id = options.id
			}

			this.getDetadil()
		},
		methods: {
			toPage(url) {
				this.$util.openNewPage(url)
			},
			async getDetadil() {
				const [err, res] = await this.$get(this.$api.orderService_detail, {
					id: this.id
				})
				if (res) {
					// console.log(res.data.descriptionReplyPic)
					// console.log(res.data.descriptionReplyPic.split(','))
					this.info = res.data
					if (res.data.descriptionPic) this.descriptionPic = res.data.descriptionPic.split(',')
// if(res.data.serviceStatus==7&&res.data.descriptionReplyPic)  this.info.descriptionReplyPic = res.data.descriptionReplyPic.split(',')

					

				}
			},
			submit() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定更新完成状态',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = {
								orderServiceId: that.info.id
							}
							that.$get(that.$api.updateToDone, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									uni.navigateBack({

									})
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			checkOutState() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定验收该订单吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = {
								orderServiceId: that.info.id
							}
							that.$get(that.$api.updateToAccepted, data).then(res => {
								const [err, rs] = res
								if (rs) {
									that.$util.msg(rs.message)
									uni.navigateBack({

									})
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.i-img {
		width: 180rpx;
		height: 180rpx;
		min-width: 180rpx;
	}

	.btn {
		padding: 20rpx 50rpx;
	}

	// .btn {
	// 	margin-top: 88rpx;
	// 	margin-bottom: 96rpx;
	// }
	.type-btn {
		width: 100%;
		display: flex;
	}
</style>
